<%--
  @desc: 地图--路线查询
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 <meta name="format-detection" content="telephone=no">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=BoDHWfB34TUhSDodZSudcbo0"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> 
<script src="<c:url value='/resource/js/jquery-1.8.3.min.js'/>"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/css/global.css'/>">
<script type="text/javascript" src="<c:url value='/resource/js/common.js'/>"></script>
<style type="text/css">
	.searchback {
		width: 30px;
		height: 100%;
		float: left;
		background: url("<c:url value='/resource/wechat/images/arr.png'/>") no-repeat center top;
		background-size: 30px 35px;
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
	}
	body,html,#showRoute {
		width: 100%;
		height: 100%;
		overflow: hidden;
		font-family: "微软雅黑";
		margin: 0;
		font-size:1rem;
		line-height:1.5;
	}
	#showRoute {
		margin-top: 35px;
	}
	.searchcondition {
		width: 125px;
		height: 35px;
		margin: 0 auto;
		padding-top: 5px;
	}
	.map_route_list {
		color: wheat;
		font-size: 12px;
		font-style: normal;
		font-family: "微软雅黑";
		line-height: normal;
	}
	.map_route_list p {
		text-indent:2em;
		text-align: left;
	}
	.map_route_list span {
		font-size: 14px;
	}
	#showdetl,#hidedetl {width: 100%; height: 23px; float: left; line-height: 23px; text-align: center;font-family: "微软雅黑","黑体","宋体";color: #fff;font-size: 14px;}
	#btn_gongj {width:25px; height:25px; margin-right: 25px; float: left; background: url("<c:url value='/resource/wechat/images/bus0.png'/>") no-repeat center top; background-size: 25px 25px}
	#btn_gongj_click {width:25px; height:25px; margin-right: 25px; float: left; background: url("<c:url value='/resource/wechat/images/bus.png'/>") no-repeat center top; background-size: 25px 25px}
	#btn_jiac {width:25px; height:25px; margin-right: 25px; float: left; background: url("<c:url value='/resource/wechat/images/taxi0.png'/>") no-repeat center top; background-size: 25px 25px}
	#btn_jiac_click {width:25px; height:25px; margin-right: 25px; float: left; background: url("<c:url value='/resource/wechat/images/taxi.png'/>") no-repeat center top; background-size: 25px 25px}
	#btn_bux {width:25px; height:25px; float: left; background: url("<c:url value='/resource/wechat/images/run0.png'/>") no-repeat center top; background-size: 25px 25px}
	#btn_bux_click {width:25px; height:25px; float: left; background: url("<c:url value='/resource/wechat/images/run.png'/>") no-repeat center top; background-size: 25px 25px}
</style>
<title>路线查询</title>
</head>
<body>
	<div class="tab_menu searchnav">
		<a class="searchback" href="javascript:void(0)" onclick="goback()"></a>
		<div class="searchcondition">
			<a onclick="searchRoute(this)" id="btn_gongj_click" href="javascript:void(0)"></a>
			<a onclick="searchRoute(this)" id="btn_jiac" href="javascript:void(0)"></a>
			<a onclick="searchRoute(this)" id="btn_bux" href="javascript:void(0)"></a>
		</div>
	</div>
	<div id="showRoute"></div>
	<div class="footer">
		<div class="map_bot">
	    	<p class="map_bot_p" style="font-size: 18px;">路线信息</p>
	    	<p class="map_bot_info"></p>
	    	<div id="map-result" style="display: none;">
	    		<div class="map_route_list"></div>
	    	</div>
			<a class="footer" id="showdetl" href="javascript:void(0)">详&nbsp;&nbsp;情</a>
	    </div>
	</div>
</body>
<script type="text/javascript">
	var isshow = false;
	var mobileHeight = $(document).height();//获取屏幕高度
	var dHeight = "+"+(mobileHeight-36)+"px";
	$("#map-result").height(mobileHeight-82);
	$("#showdetl").click(function(){
		if(!isshow){
			$(".map_bot").animate({
				height: dHeight
			}, 500);
			$(".map_bot_info").hide();
			$("#map-result").show();
			$(this).html("返&nbsp;&nbsp;回");
			isshow = true;
		}else {
			$(".map_bot").animate({
				height: "+80px"
			}, 500, function(){
				$(".map_bot_info").show();
				$("#map-result").hide();
			});
			$(this).html("详&nbsp;&nbsp;情");
			isshow = false;
		}
	})
	
	function hiddetl(){
		$(".map_bot").animate({
			height: "+80px"
		}, 500, function(){
			$(".map_bot_info").show();
			$("#map-result").hide();
		});
		$("#showdetl").html("详&nbsp;&nbsp;情");
		isshow = false;
	}
	
	function goback(){
		var mapstatus = GetCookie("tcwx_BMapInfo");
		var searchName = mapstatus.split(",")[0];
		var searchID = mapstatus.split(",")[1];
		var mapLng = mapstatus.split(",")[2];
		var mapLat = mapstatus.split(",")[3];
		escape(encodeURIComponent(searchName))
		window.location.href = "<c:url value='/weixin/bm/loadmap'/>?searchname="+escape(encodeURIComponent(searchName))+"&searchid="+searchID+"&maplng="+mapLng+"&maplat="+mapLat;
	}
	
	/**
		从cookie中获取上次地图的状态
	*/
	function GetCookie (name)   
	{   
	    var arg = name + "=";   
	    var alen = arg.length;   
	    var clen = window.document.cookie.length;   
	    var i = 0;   
	    while (i < clen)   
	    {   
	        var j = i + alen;   
	        if (window.document.cookie.substring(i, j) == arg) return getCookieVal (j);   
	        i = window.document.cookie.indexOf(" ", i) + 1;   
	        if (i == 0)  
	            break;   
	    }   
	    return null;  
	}  
	function getCookieVal (offset)  
	{   
	    var endstr = window.document.cookie.indexOf (";", offset);   
	    if (endstr == -1)  
	        endstr = window.document.cookie.length;   
	    return unescape(window.document.cookie.substring(offset, endstr));  
	}  
	/*-------------------------百度地图部分----------------------------------*/
	var map = new BMap.Map("showRoute");
	map.centerAndZoom("太仓市", 13);
	var sp = "${startpoi}".split(",");
	var ep = "${endpoi}".split(",");
	var start_poi = new BMap.Point(parseFloat(sp[0].replace("_",".")),parseFloat(sp[1].replace("_",".")));
	var end_poi = new BMap.Point(parseFloat(ep[0].replace("_",".")),parseFloat(ep[1].replace("_",".")));
	
	route_transit();
	
	var clickObj = document.getElementById("btn_gongj_click");
	function searchRoute(obj){
		switch(obj.id){
		case "btn_gongj":
			route_transit(obj);
			break;
		case "btn_jiac":
			route_drive(obj);
			break;
		case "btn_bux":
			route_bux(obj);
			break;
		}
	}
	
	//公交路线查询
	function route_transit(obj){
		if(typeof obj!="undefined"){
			obj.id = "btn_gongj_click";
			clickObj.id = clickObj.id.substring(0,clickObj.id.lastIndexOf("_"));
			clickObj = obj;
		}
		$("#showdetl").show();
		map.clearOverlays();
		var transit = new BMap.TransitRoute(map, {
			renderOptions: {map:map}
		});
		transit.search(start_poi,end_poi);
		transit.setSearchCompleteCallback(function(res){
			if(res.getNumPlans() <= 0){
				$(".map_bot_info").html("未查询到公交路线");
				return;
			}
			$(".map_route_list").html("");
			$(".map_bot_info").html("路程："+res.getPlan(0).getDistance(true)+"<br>时间："+res.getPlan(0).getDuration(true));
			for(var i = 0; i < res.getNumPlans(); i++){
				var routedocture = res.getPlan(i).getDescription(false);
				$(".map_route_list").append("<p>"+(i+1)+","+routedocture+"</p><br>");
			}
		})
	}
	
	//驾车路线查询
	function route_drive(obj){
		obj.id = "btn_jiac_click";
		clickObj.id = clickObj.id.substring(0,clickObj.id.lastIndexOf("_"));
		clickObj = obj;
		map.clearOverlays();
		var drive = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
		drive.search(start_poi, end_poi);
		drive.setSearchCompleteCallback(function(res){
			if(res.getNumPlans() <= 0){
				$(".map_bot_info").html("未查询到驾车路线");
				return;
			}
			$(".map_route_list").html("");
			$(".map_bot_info").html("路程："+res.getPlan(0).getDistance(true)+"<br>时间："+res.getPlan(0).getDuration(true));
			for(var i = 0; i < res.getNumPlans(); i++){
				var rout = res.getPlan(i).getRoute(i);
				var keyNum = rout.getNumSteps();
				for(var j = 0; j < keyNum; j++){
					var routedocture = rout.getStep(j).getDescription(false);
					$(".map_route_list").append("<p>"+(j+1)+","+routedocture+"</p><br>");
				}
			}
		});
	}
	
	//步行路线查询
	function route_bux(obj){
		obj.id = "btn_bux_click";
		clickObj.id = clickObj.id.substring(0,clickObj.id.lastIndexOf("_"));
		clickObj = obj;
		map.clearOverlays();
		var walk = new BMap.WalkingRoute(map,{renderOptions:{map: map, autoViewport: true}});
		walk.search(start_poi,end_poi);
		walk.setSearchCompleteCallback(function(res){
			if(res.getNumPlans() <= 0){
				$(".map_bot_info").html("未查询到步行路线");
				return;
			}
			$(".map_route_list").html("");
			$(".map_bot_info").html("路程："+res.getPlan(0).getDistance(true)+"<br>时间："+res.getPlan(0).getDuration(true));
			for(var i = 0; i < res.getNumPlans(); i++){
				var rout = res.getPlan(i).getRoute(i);
				var keyNum = rout.getNumSteps();
				for(var j = 0; j < keyNum; j++){
					var routedocture = rout.getStep(j).getDescription(false);
					$(".map_route_list").append("<p>"+(j+1)+","+routedocture+"</p><br>");
				}
			}
		});
	}
</script>
</html>